<template>
  <display-component :rawHtml="rawHtml_1">
    <div class="split-demo-container">
      <vi-split-pane mode="horizontal" :initial-split="0.3" @split-change="handleSplitChange">
        <template #left>
          <div class="pane-content">
            <h3>左侧面板</h3>
            <p>可拖动分隔条调整大小</p>
          </div>
        </template>
        <template #right>
          <div class="pane-content">
            <h3>右侧面板</h3>
            <p>内容区域</p>
          </div>
        </template>
      </vi-split-pane>
    </div>
  </display-component>
  <display-component :rawHtml="rawHtml_2">
    <div class="vertical-split-demo">
      <vi-split-pane mode="vertical" :initial-split="0.4">
        <template #left>
          <div class="pane-content">
            <h3>上部面板</h3>
            <p>可上下拖动调整大小</p>
          </div>
        </template>
        <template #right>
          <div class="pane-content">
            <h3>下部面板</h3>
            <p>内容区域</p>
          </div>
        </template>
      </vi-split-pane>
    </div>
  </display-component>


</template>

<script setup lang="ts">
import DisplayComponent from '@/layouts/DisplayComponent.vue';

const handleSplitChange = (position: number) => {
  console.log('当前分隔位置:', position)
}


const rawHtml_1 = `
<template>
  <div class="split-demo-container">
    <vi-split-pane mode="horizontal" :initial-split="0.3" @split-change="handleSplitChange">
      <template #left>
        <div class="pane-content">
          <h3>左侧面板</h3>
          <p>可拖动分隔条调整大小</p>
        </div>
      </template>
      <template #right>
        <div class="pane-content">
          <h3>右侧面板</h3>
          <p>内容区域</p>
        </div>
      </template>
    </vi-split-pane>
  </div>
</template>
<script lang="ts">
const handleSplitChange = (position: number) => {
  console.log('当前分隔位置:', position)
}
<\/script>

<style>
.split-demo-container {
  width: 100%;
  height: 400px;
  border: 1px solid #dcdfe6;
}
<\/style>
`
const rawHtml_2 = `
<template>
  <div class="vertical-split-demo">
    <vi-split-pane mode="vertical" :initial-split="0.4">
      <template #left>
        <div class="pane-content">
          <h3>上部面板</h3>
          <p>可上下拖动调整大小</p>
        </div>
      </template>
      <template #right>
        <div class="pane-content">
          <h3>下部面板</h3>
          <p>内容区域</p>
        </div>
      </template>
    </vi-split-pane>
  </div>
</template>
<script lang="ts">
const handleSplitChange = (position: number) => {
  console.log('当前分隔位置:', position)
}
<\/script>

<style>
.vertical-split-demo {
  width: 100%;
  height: 500px;
  border: 1px solid #dcdfe6;
}
<\/style>
`
</script>


<style>
.vertical-split-demo {
  width: 100%;
  height: 500px;
  border: 1px solid #dcdfe6;
}

.split-demo-container {
  width: 100%;
  height: 400px;
  border: 1px solid #dcdfe6;
}

.pane-content {
  padding: 20px;
}
</style>
